<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>演示js通过dom获取页面元素</title>
	</head>
	<body>
		<div>
			11111
		</div>
		<div class="box">
			2222
		</div>
		<div class="box">
			3333
		</div>
		
		<div>
			<input type="text" id="txtName" />
		</div>
		
		<script type="text/javascript">
			// 获取所有div标签.组成一个数组.可以通过下标访问其中任一个div标签元素
			var divList = document.getElementsByTagName("div");
			console.log(divList);
			for(var i=0; i<divList.length; i++){
				console.log("第" + i + "个div的innerText内容是" + divList[i].innerText);
			}
			console.log("通过tagName获取不存在的标签")
			divList = document.getElementsByTagName("divxxx");
			console.log(divList);
			
			console.log("通过样式类名获取标签")
			divList = document.getElementsByClassName("box");
			console.log(divList);
			for(var i=0; i<divList.length; i++){
				console.log("第" + i + "个div的innerText内容是" + divList[i].innerText);
			}
			
			
			console.log("通过className获取不存在的类")
			divList = document.getElementsByClassName("box3333");
			console.log(divList);
			
			console.log(divList.length);
			
			
			// 获取dom对象属性
	        var txt1 = document.getElementById('txtName');
			// 获取标签中指定名字的属性值
			var txt1Type = txt1.getAttribute("type");
			console.log(txt1Type);
			// 设置指定的属性
			txt1.setAttribute("type", 'button');
			txt1.setAttribute('value', '点我');
			// 取input的值或设置值。可以直接用value
			txt1.value = '神马？'
			
			// 自定义属性使用上与原生属性一致
			txt1.setAttribute('xxxx', '222222');
			txt1Type = txt1.getAttribute("xxxx");
			console.log(txt1Type);
			// 获取并不存在的属性.返回null
			txt1Type = txt1.getAttribute("type333");
			console.log(txt1Type);
			
		</script>
	</body>
</html>
